<template>
	<!-- 悬浮按钮 -->
	<view>
		<uni-fab ref="fab" 
		:popMenu="popMenu" 
		:pattern="pattern"  
		:horizontal="horizontal" 
		:vertical="vertical"
		:direction="direction" 
		@trigger="trigger" 
		@fabClick="fabClick" />
		
		<!-- 模态框添加 -->
		<u-modal 
				confirmText="添加"
				:show="interviewFormShowAdd"  
				:title="title"
				:showConfirmButton="showConfirmButton"
				:showCancelButton="showCancelButton"
				:width="width"
				@confirm="confirm(uToastInfo)"
				@cancel="cancleAdd()">
			<view class="slot-content">
				<u--form
				labelPosition="top"
				labelWidth="70px"
				:model="interviewInfo"
				:rules="rules"
				ref="form1">
				
					<u-form-item
					label="面试渠道"
					prop="interviewInfo.interviewChannel"
					ref="item1">
						<u--input
						v-model="interviewInfo.interviewChannel"
						style="width: 600rpx;"
						placeholder="请输入面试渠道"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
						
					<u-form-item
					label="面试企业"
					prop="interviewInfo.interviewEnterprise"
					ref="item1">
						<u--input
						v-model="interviewInfo.interviewEnterprise"
						style="width: 600rpx;"
						placeholder="请输入面试企业"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
					
					<u-form-item
					label="面试方式"
					prop="interviewInfo.interviewMode"
					borderBottom
					@click="showInterviewType = true;"
					ref="item1">
								
						<u--input
						v-model="interviewInfo.interviewMode"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择方式"
						border="none"></u--input>
						
						<u-icon
						slot="right"
						name="arrow-down"></u-icon>
						
						<view>
							<u-action-sheet
								:show="showInterviewType"
								 cancelText="取消"
								:closeOnClickOverlay="true"
								@close="closeInterviewType"
								:actions="InterviewTypes"
								@select="InterviewTypeSelect">
							</u-action-sheet>
						</view>

					</u-form-item>
					
					<u-form-item
					label="面试时间"
					prop="interviewInfo.interviewTime"
					ref="item1">
						<uni-datetime-picker 
						style="width: 620rpx;" 
						v-model="interviewInfo.interviewTime" />
					</u-form-item>
					
					<u-form-item
					label="面试地点"
					prop="interviewInfo.interviewAddress"
					ref="item1">
						<u--input
						v-model="interviewInfo.interviewAddress"
						style="width: 600rpx;"
						placeholder="请输入面试地点"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
					
					<u-form-item
					label="面试职位"
					prop="interviewInfo.interviewPosition"
					ref="item1">
						<u--input
						v-model="interviewInfo.interviewPosition"
						style="width: 600rpx;"
						placeholder="请输入面试职位"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		
		
		<!-- 模态框修改 -->
		<u-modal 
				confirmText="修改"
				:show="interviewFormShowUpdate"  
				:title="title"
				:showConfirmButton="showConfirmButton"
				:showCancelButton="showCancelButton"
				:width="width"
				@confirm="confirmUpdate(uToastInfo)"
				@cancel="cancleUpdate()">
			<view class="slot-content">
				<u--form
				labelPosition="top"
				labelWidth="70px"
				:model="interviewInfo2"
				:rules="rules"
				ref="form1">
				
					<u-form-item
					label="面试渠道"
					prop="interviewInfo2.interviewChannel"
					ref="item1">
						<u--input
						v-model="interviewInfo2.interviewChannel"
						style="width: 600rpx;"
						placeholder="请输入面试渠道"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
						
					<u-form-item
					label="面试企业"
					prop="interviewInfo2.interviewEnterprise"
					ref="item1">
						<u--input
						v-model="interviewInfo2.interviewEnterprise"
						style="width: 600rpx;"
						placeholder="请输入面试企业"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
					
					<u-form-item
					label="面试方式"
					prop="interviewInfo2.interviewMode"
					borderBottom
					@click="showInterviewType = true;"
					ref="item1">
								
						<u--input
						v-model="interviewInfo2.interviewMode"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择方式"
						border="none"></u--input>
						
						<u-icon
						slot="right"
						name="arrow-down"></u-icon>
						
						<view>
							<u-action-sheet
								:show="showInterviewType"
								 cancelText="取消"
								:closeOnClickOverlay="true"
								@close="closeInterviewType"
								:actions="InterviewTypes"
								@select="InterviewTypeSelect">
							</u-action-sheet>
						</view>
		
					</u-form-item>
					
					<u-form-item
					label="面试时间"
					prop="interviewInfo2.interviewTime"
					ref="item1">
						<uni-datetime-picker 
						style="width: 620rpx;" 
						v-model="interviewInfo2.interviewTime" />
					</u-form-item>
					
					<u-form-item
					label="面试地点"
					prop="interviewInfo2.interviewAddress"
					ref="item1">
						<u--input
						v-model="interviewInfo2.interviewAddress"
						style="width: 600rpx;"
						placeholder="请输入面试地点"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
					
					<u-form-item
					label="面试职位"
					prop="interviewInfo2.interviewPosition"
					ref="item1">
						<u--input
						v-model="interviewInfo2.interviewPosition"
						style="width: 600rpx;"
						placeholder="请输入面试职位"
						border="bottom"
						clearable></u--input>	
					</u-form-item>
				</u--form>
				
				<view>
					<!-- 无权限提示 -->
					<u-empty 
							v-if="interviewStuName==''"
							width="100%" 
							height="100%"
							mode="permission"
							icon="/static/img/empty/无权限.png">
					</u-empty>
					</view>
			</view>
		</u-modal>

		
		<!-- 消息提示 -->
		<u-toast
		ref="uToast"
		:type="uToastInfo.type"
		:message="uToastInfo.message"
		:position="uToastInfo.position"
		></u-toast>
		
		<view>
			<!-- 面试预约展示 -->
			<uni-section v-for="(interview,index) in interviewList" :key="index" :title="'面试预约-'+(index+1)" type="line">
						<uni-group :title="'预约编号:'+interview.id" mode="card">
						
						<span style="float: right;color: #007AFF;font-size: 13px;"  @click="addFeedback(interview.interviewId)">面试反馈</span>
							<view> <text><span style="color: gray;font-weight: 100;">面试渠道：</span>{{interview.interviewChannel}}</text> </view>
							<view> <text><span style="color: gray;font-weight: 100;">面试企业：</span>{{interview.interviewEnterprise}}</text> </view>
							<view> <text><span style="color: gray;font-weight: 100;">面试方式：</span>{{interview.interviewMode}}</text> </view>
							<view> <text><span style="color: gray;font-weight: 100;">面试时间：</span>{{interview.interviewTime}}</text> </view>
							<view> <text><span style="color: gray;font-weight: 100;">面试地点：</span>{{interview.interviewAddress}}</text> </view>
							<view> <text><span style="color: gray;font-weight: 100;">面试职位：</span>{{interview.interviewPosition}}</text> </view>
							<view style="padding-top:20rpx;padding-bottom: 0;">
								<span style="color: #18BC37;font-size: 15px;font-weight: bold;" v-if="interview.interviewResults==0">{{interview.interviewResults==0 ? '已通过':'未通过'}}</span>
								<span style="color: red;font-size: 15px;font-weight: bold;" v-if="interview.interviewResults==1">{{interview.interviewResults==0 ? '已通过':'未通过'}}</span>
								<u-button type="primary" style="width: 60px;float: right;margin-bottom: 10px;"  size="small" :plain="true" text="修改" @click="updateInterview(interview.id)"></u-button>
							</view>
						</uni-group>
			</uni-section>
			
			<!-- 加载更多 -->
			<uni-load-more iconType="circle" :status="loadingInfo.status" />
		</view>
	</view>
	


</template>

<script>
	export default {
		data() {
			return {
				interviewStuName:'',
				interviewId:'',
				pageInfo:{
					pageNo:1,
					pageSize:5,
				},
				loadingInfo:{
					status: 'loading',
				},
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				horizontal: 'right',//水平对齐方式
				vertical: 'bottom',//垂直对齐方式
				direction: 'horizontal',//展示菜单显示方式
				popMenu:false,//是否使用弹出菜单
				/* content: [ //菜单内容配置项
					{
						iconPath: '/static/icon/add-icon.png',
						selectedIconPath: '/static/image-active.png',
						text: '新增面试',
						active: false
					},
					{
						iconPath: '/static/home.png',
						selectedIconPath: '/static/home-active.png',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/star.png',
						selectedIconPath: '/static/star-active.png',
						text: '收藏',
						active: false
					}
				], */
				interviewFormShowAdd:false,
				interviewFormShowUpdate:false,
				title:'添加面试预约',
				showConfirmButton:true,
				showCancelButton:true,
				width:"700rpx",
				
				interviewInfo:{},//新增的预约信息
				interviewInfo2:{},///修改回显的回显预约信息
				interviewList:{},//展示的预约信息
				rules:[],
				showInterviewType:false,//面试方式展示
				InterviewTypes: [//面试方式选择器
					{
						name: '电话',
					},			
					{
						name: '视频',
					},
					{
						name: '线下',
					},
				],
				uToastInfo:{//消息提示
					type: 'success',
					message: "面试预约添加成功",
					position:"top",
				},
				show: false,
				currentTime:'',
				Urls:{
					"addInterViewInfoByStuId":'/interview/employmenInterview/addInterViewInfoByStuId',
					"showInterviewListByStuId":'/interview/employmenInterview/showInterviewListByStuId',
					"showInterviewbyInsterviewId":'/interview/employmenInterview/queryById',
					"updateInterview":'interview/employmenInterview/updatebyId',
				}
	
				
			}
		},
		methods: {
			//跳转到面试反馈页
			addFeedback(interviewId){
				uni.navigateTo({
					url: '/pages/service/employmentservice/employmenInterview/interviewFeedback?interviewId='+interviewId,
				});
			},
			onLoad(option){
				if(JSON.stringify(option)!="{}"){
					this.interviewStuName=option.interviewStuName;
				}else{
					alert("该功能仅对学员开放")
				}
			},
			onShow(){
				if(this.interviewStuName!=""){
					this.sleep(1000).then(() => { 
						this.pageInfo.pageNo=1;
						this.showInterviewListByStuId();
					});
				}
			},
			/* 睡眠方法 */
			sleep (time) {
			  return new Promise((resolve) => setTimeout(resolve, time));
			},
			onReachBottom(){//下拉加载更多
				if(this.interviewStuName!=""){
					this.sleep(1000).then(() => {
						this.loadingInfo.status='loading';
					});
								
					
					this.pageInfo.pageNo++;
					
					this.sleep(2000).then(() => {
					    // 这里写sleep之后需要去做的事情
							this.$axios.post(this.Urls.showInterviewListByStuId+"?interviewStuName="+this.interviewStuName+"&pageNo="+this.pageInfo.pageNo+"&pageSize="+this.pageInfo.pageSize).then(res=>{
								if(res.data.success){
									console.log(this.Urls.showInterviewListByStuId)
									console.log(this.interviewStuName)
									console.log(this.pageInfo.pageNo)
									console.log(this.pageInfo.pageSize)
									this.interviewList=this.interviewList.concat(res.data.result.records);
									if(res.data.result.records.length==0){
										this.loadingInfo.status='noMore';
									}else{
										this.loadingInfo.status='more';
									}
								}
							});
					});
				}
			},
			onPullDownRefresh(){//下拉刷新
				
				 this.sleep(2000).then(() => {
							this.pageInfo.pageNo=1;
							this.showInterviewListByStuId();
							uni.stopPullDownRefresh();
						});
			},
			/* 展示面试预约   1-5 */
			showInterviewListByStuId(){
				this.sleep(2000).then(() => {
					console.log(this.Urls.showInterviewListByStuId)
					console.log(this.interviewStuName)
					console.log(this.pageInfo.pageNo)
					console.log(this.pageInfo.pageSize)
					this.$axios.post(this.Urls.showInterviewListByStuId+"?interviewStuName="+this.interviewStuName+"&pageNo="+this.pageInfo.pageNo+"&pageSize="+this.pageInfo.pageSize).then(res=>{
						if(res.data.success){
							console.log(res)
							this.interviewList = res.data.result.records;
							if(res.data.result.records.length==0){
								this.loadingInfo.status='noMore';
							}else{
								this.loadingInfo.status='more';
							}
							
						}
					});
				});
				
			},
			/* 添加成功消息提示 */
			showToast(params){
				this.$refs.uToast.show({
					...params
				});
			},
			/* 点击悬浮按钮 */
			fabClick() {
				this.interviewFormShowAdd=true
			},
			
			/* 模态框确认按钮  添加面试预约*/
			confirm(message){

					this.$axios.post(this.Urls.addInterViewInfoByStuId+"?interviewStuName="+this.interviewStuName,this.interviewInfo).then(res=>{
						
						if(res.data.success){
							this.showToast(message);
							console.log(res)
							this.interviewInfo={};
						}
					});
				this.pageInfo.pageNo=1;
				this.showInterviewListByStuId();
				this.interviewFormShowAdd = false;
				
			},
			/* 模态框取消按钮 */
			cancleAdd(){
				this.interviewFormShowAdd = false
			},
			cancleUpdate(){
				this.interviewFormShowUpdate = false
			},

			InterviewTypeSelect(e){//面试方式数据封装进对象
				this.interviewInfo.interviewMode=e.name;
				this.interviewInfo2.interviewMode=e.name;
			},
			closeInterviewType() {//面试类型取消按钮功能
				console.log('close');
				this.showInterviewType = false
			},
			/* 修改面试预约的回显  */
			updateInterview(id){
				this.interviewId=id;
				this.$axios.get(this.Urls.showInterviewbyInsterviewId+"?id="+id).then((res)=>{
					if(res.data.success){
						this.interviewFormShowUpdate=true
						this.interviewInfo2=res.data.result
					}
				})
			},
			/*修改面试信息 */
			confirmUpdate(message){
				this.uToastInfo.message="修改成功"
				this.$axios.post(this.Urls.updateInterview+"?id="+this.interviewId,this.interviewInfo2).then((res)=>{
					if(res.data.success){
						this.showToast(message);
					}
				});
				this.pageInfo.pageNo=1;
				this.showInterviewListByStuId();//刷新数据
				this.interviewFormShowUpdate = false;//提示修改成功
				
			},
			
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>
